<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频播放器 | 山山解析</title>
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="在线视频播放器，支持多种视频格式的在线播放。支持抖音、快手、B站、小红书等平台视频播放。">
    <meta name="keywords" content="视频播放器, 在线播放, 视频解析, 抖音播放, 快手播放, B站播放">
    <meta name="author" content="山山解析">
    <meta name="robots" content="index, follow">
    
    <!-- Favicon -->
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="视频播放器 | 山山解析">
    <meta property="og:description" content="在线视频播放器，支持多种视频格式的在线播放。">
    <meta property="og:url" content="https://www.xiaoshanqing.tech/static/player.html">
    <meta property="og:site_name" content="山山解析">
    <meta property="og:image" content="https://www.xiaoshanqing.tech/static/img/og-image.svg">
    
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="视频播放器 | 山山解析">
    <meta name="twitter:description" content="在线视频播放器，支持多种视频格式的在线播放。">
    <meta name="twitter:image" content="https://www.xiaoshanqing.tech/static/img/og-image.svg">
    
    <!-- 额外SEO标签 -->
    <meta name="theme-color" content="#667eea">
    <link rel="canonical" href="https://www.xiaoshanqing.tech/static/player.html">
    
    <!-- Favicon -->
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='grad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' style='stop-color:%2364b5f6;stop-opacity:1'/><stop offset='100%25' style='stop-color:%23e91e63;stop-opacity:1'/></linearGradient></defs><rect width='100' height='100' rx='20' fill='url(%23grad)'/><path d='M25 35 L75 35 A5 5 0 0 1 80 40 L80 70 A5 5 0 0 1 75 75 L25 75 A5 5 0 0 1 20 70 L20 40 A5 5 0 0 1 25 35 Z' fill='white'/><circle cx='40' cy='55' r='8' fill='%2364b5f6'/><polygon points='55,45 70,55 55,65' fill='%23e91e63'/></svg>">
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Styles -->
    <link rel="stylesheet" href="/static/css/app.css">
    
    <!-- Analytics & 商业化追踪 -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z87T2K1RVY"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-Z87T2K1RVY');
        
        // 播放器页面进入跟踪
        gtag('event', 'page_view', {
            'page_title': '视频播放器',
            'page_location': window.location.href
        });
        
        window.trackEvent = function(action, category, label, value) {
            gtag('event', action, {
                'event_category': category,
                'event_label': label,
                'value': value
            });
        };
    </script>
    
    <style>
        /* Player specific styles */
        .player-section {
            padding: 4rem 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: calc(100vh - 8rem);
            position: relative;
            overflow: hidden;
        }

        .player-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            pointer-events: none;
        }

        .player-section .container {
            position: relative;
            z-index: 1;
        }

        .player-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 2rem;
            overflow: hidden;
            box-shadow: 
                0 32px 64px rgba(0, 0, 0, 0.12),
                0 16px 32px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            max-width: 56rem;
            margin: 0 auto;
        }

        .player-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
        }

        .player-header {
            padding: 2rem 2rem 1rem;
            text-align: center;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%);
        }

        .player-title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .player-subtitle {
            color: var(--text-secondary);
            font-size: 1rem;
        }


        .video-wrapper {
            position: relative;
            width: 100%;
            margin: 0;
            border-radius: 0;
            overflow: hidden;
        }

        .video-player {
            width: 100%;
            height: auto;
            display: block;
            background: #000;
        }

        .video-placeholder {
            aspect-ratio: 16/9;
            background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.125rem;
            gap: 0.5rem;
        }

        .placeholder-icon {
            font-size: 3rem;
            opacity: 0.7;
        }

        .controls {
            padding: 2rem;
            background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.6) 100%);
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }

        .controls::before {
            content: '';
            position: absolute;
            top: 0;
            left: 2rem;
            right: 2rem;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
        }

        .control-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.875rem 1.75rem;
            border: none;
            border-radius: 0.75rem;
            font-weight: 600;
            font-size: 0.875rem;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            min-width: 140px;
            justify-content: center;
        }

        .control-btn.primary {
            background: linear-gradient(135deg, var(--primary-color), #6366f1);
            color: white;
            box-shadow: 
                0 8px 16px rgba(79, 70, 229, 0.3),
                0 4px 8px rgba(79, 70, 229, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .control-btn.primary:hover {
            background: linear-gradient(135deg, var(--primary-hover), #5855eb);
            transform: translateY(-3px) scale(1.02);
            box-shadow: 
                0 16px 32px rgba(79, 70, 229, 0.4),
                0 8px 16px rgba(79, 70, 229, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.2);
        }

        .control-btn.secondary {
            background: rgba(255, 255, 255, 0.8);
            color: var(--text-secondary);
            border: 1px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: 
                0 4px 8px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(255, 255, 255, 0.1);
        }

        .control-btn.secondary:hover {
            background: rgba(255, 255, 255, 0.95);
            color: var(--text-primary);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-2px);
            box-shadow: 
                0 8px 16px rgba(0, 0, 0, 0.12),
                0 4px 8px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(255, 255, 255, 0.2);
        }

        .info-section {
            padding: 1.5rem 2rem;
            background: rgba(255, 255, 255, 0.9);
        }

        .info-title {
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--text-primary);
        }

        .info-list {
            list-style: none;
        }

        .info-list li {
            padding: 0.5rem 0;
            border-bottom: 1px solid rgba(229, 231, 235, 0.5);
            color: var(--text-secondary);
        }

        .info-list li:last-child {
            border-bottom: none;
        }

        .error-card {
            background: rgba(254, 242, 242, 0.9);
            border: 1px solid rgba(254, 202, 202, 0.5);
            color: var(--danger-color);
            border-radius: 1rem;
            padding: 1.5rem;
            text-align: center;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: 
                0 8px 16px rgba(239, 68, 68, 0.1),
                0 0 0 1px rgba(255, 255, 255, 0.1);
            font-weight: 500;
        }

        .loading-card {
            background: rgba(239, 246, 255, 0.9);
            border: 1px solid rgba(191, 219, 254, 0.5);
            color: var(--info-color);
            border-radius: 1rem;
            padding: 1.5rem;
            text-align: center;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: 
                0 8px 16px rgba(59, 130, 246, 0.1),
                0 0 0 1px rgba(255, 255, 255, 0.1);
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
        }

        .loading-spinner {
            display: inline-block;
            width: 1.25rem;
            height: 1.25rem;
            border: 2px solid rgba(191, 219, 254, 0.5);
            border-radius: 50%;
            border-top-color: var(--info-color);
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        @media (max-width: 768px) {
            .player-section {
                padding: 2rem 0;
            }

            .player-card {
                margin: 0 1rem;
            }
            
            .player-header {
                padding: 1.5rem 1.5rem 1rem;
            }
            
            .player-title {
                font-size: 1.5rem;
            }
            
            .controls {
                padding: 1.5rem;
                flex-direction: column;
            }
            
            .control-btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <!-- 页面头部 -->
    <div data-component="header"></div>

    <!-- 主要内容区域 -->
    <main class="main-content" role="main">
        <section class="player-section">
            <div class="container">

                <!-- 顶部广告位 -->
                <div class="ad-container ad-player-top" id="adPlayerTop" style="display: none;">
                    <div class="ad-placeholder">
                        <span class="ad-label">广告位 - 播放器顶部</span>
                        <div class="ad-size">728x90</div>
                    </div>
                </div>

                <div class="player-card">
                    <!-- 播放器标题 -->
                    <div class="player-header">
                        <h1 class="player-title">视频播放器</h1>
                        <p class="player-subtitle">在线播放和下载视频内容</p>
                    </div>

                    <!-- 视频播放区域 -->
                    <div class="video-wrapper">
                        <!-- 视频播放器 -->
                        <video id="videoPlayer" class="video-player" controls style="display: none;">
                            您的浏览器不支持视频播放。
                        </video>
                        
                        <!-- 占位符 -->
                        <div id="videoPlaceholder" class="video-placeholder">
                            <div class="placeholder-icon">🎬</div>
                            <div>等待加载视频...</div>
                        </div>

                        <!-- 加载状态 -->
                        <div id="loadingState" class="loading-card" style="display: none;">
                            <div class="loading-spinner"></div>
                            正在加载视频，请稍候...
                        </div>

                        <!-- 错误状态 -->
                        <div id="errorState" class="error-card" style="display: none;">
                            <strong>加载失败</strong>
                            <p id="errorMessage">视频加载出现问题，请重试。</p>
                        </div>
                    </div>

                    <!-- 控制按钮 -->
                    <div class="controls">
                        <button id="playBtn" class="control-btn primary" style="display: none;">
                            ▶️ 播放视频
                        </button>
                        <button id="fullscreenBtn" class="control-btn secondary" style="display: none;">
                            🔍 全屏播放
                        </button>
                        <button id="retryBtn" class="control-btn secondary" onclick="location.reload()">
                            🔄 重新加载
                        </button>
                    </div>

                    <!-- 说明信息 -->
                    <div class="info-section">
                        <h3 class="info-title">使用说明</h3>
                        <ul class="info-list">
                            <li>• <strong>下载视频</strong>：在视频上右键选择"另存为"即可保存到本地</li>
                            <li>• 支持大部分主流视频格式：MP4、WebM、AVI等</li>
                            <li>• 建议使用现代浏览器以获得最佳播放体验</li>
                            <li>• 如遇到问题，请刷新页面重试</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页面底部 -->
    <div data-component="footer"></div>

    <script>
        class VideoPlayer {
            constructor() {
                this.videoPlayer = document.getElementById('videoPlayer');
                this.videoPlaceholder = document.getElementById('videoPlaceholder');
                this.loadingState = document.getElementById('loadingState');
                this.errorState = document.getElementById('errorState');
                this.errorMessage = document.getElementById('errorMessage');
                this.playBtn = document.getElementById('playBtn');
                this.fullscreenBtn = document.getElementById('fullscreenBtn');
                
                // 初始化fallback相关标志
                this.shouldTryFallback = false;
                this.fallbackAttempted = false;
                
                this.init();
            }

            async init() {
                // 获取URL参数中的视频地址
                const urlParams = new URLSearchParams(window.location.search);
                const videoUrl = urlParams.get('video_url');
                const originalUrl = urlParams.get('original_url'); // 原始页面URL，用于重新获取

                if (videoUrl) {
                    // 检查是否为B站且可能过期的URL
                    if (this.detectPlatform(videoUrl, originalUrl) === 'bilibili' && this.isUrlExpired(videoUrl)) {
                        if (originalUrl) {
                            this.refreshBilibiliUrl(originalUrl);
                        } else {
                            await this.loadVideo(videoUrl, originalUrl); // 还是尝试加载，可能没过期
                        }
                    } else {
                        await this.loadVideo(videoUrl, originalUrl);
                    }
                } else {
                    this.showError('未指定视频地址');
                }

                // 绑定事件
                this.bindEvents();
            }

            // 检查B站URL是否可能过期
            isUrlExpired(url) {
                try {
                    const urlObj = new URL(url);
                    const deadline = urlObj.searchParams.get('deadline');
                    if (deadline) {
                        const deadlineTime = parseInt(deadline) * 1000; // 转换为毫秒
                        const now = Date.now();
                        return now > deadlineTime;
                    }
                } catch (e) {
                    console.error('解析URL失败:', e);
                }
                return false;
            }

            // 重新获取B站视频URL
            async refreshBilibiliUrl(originalUrl) {
                try {
                    this.showLoading();
                    console.log('B站URL可能已过期，重新获取:', originalUrl);
                    
                    const response = await fetch(`/api/media/test/platform_compare?url=${encodeURIComponent(originalUrl)}`);
                    const result = await response.json();
                    
                    if (result.code === 200) {
                        const newVideoUrl = result.data.complete_response.media.video_url;
                        console.log('获取到新的B站视频URL:', newVideoUrl.substring(0, 100) + '...');
                        await this.loadVideo(newVideoUrl);
                    } else {
                        this.showError('无法获取最新的视频地址');
                    }
                } catch (error) {
                    console.error('刷新B站URL失败:', error);
                    this.showError('刷新视频地址失败');
                }
            }

            bindEvents() {
                // 播放按钮
                this.playBtn.addEventListener('click', () => {
                    this.videoPlayer.play();
                });

                // 全屏按钮
                this.fullscreenBtn.addEventListener('click', () => {
                    if (this.videoPlayer.requestFullscreen) {
                        this.videoPlayer.requestFullscreen();
                    } else if (this.videoPlayer.webkitRequestFullscreen) {
                        this.videoPlayer.webkitRequestFullscreen();
                    }
                });

                // 视频事件
                this.videoPlayer.addEventListener('loadstart', () => {
                    this.showLoading();
                });

                this.videoPlayer.addEventListener('canplay', () => {
                    this.showVideo();
                });

                this.videoPlayer.addEventListener('error', (e) => {
                    console.error('视频加载错误:', e);
                    const error = e.target.error;
                    const platform = this.detectPlatform(this.originalUrl);
                    
                    console.log('错误详情:', {
                        platform: platform,
                        originalUrl: this.originalUrl,
                        videoSrc: this.videoPlayer.src,
                        useProxy: this.useProxy,
                        errorCode: error ? error.code : 'unknown',
                        errorMessage: error ? error.message : 'unknown',
                        shouldTryFallback: this.shouldTryFallback,
                        fallbackAttempted: this.fallbackAttempted
                    });
                    
                    // 如果是使用代理加载失败，尝试直接加载
                    if (this.useProxy && !this.fallbackAttempted) {
                        this.fallbackAttempted = true;
                        console.log('代理加载失败，尝试直接加载');
                        this.tryFallbackLoad();
                        return;
                    }
                    
                    let errorMessage = '视频加载失败，可能是格式不支持或网络问题';
                    
                    if (error) {
                        switch (error.code) {
                            case error.MEDIA_ERR_ABORTED:
                                errorMessage = '视频加载被中断';
                                break;
                            case error.MEDIA_ERR_NETWORK:
                                errorMessage = '网络错误，无法加载视频';
                                break;
                            case error.MEDIA_ERR_DECODE:
                                errorMessage = '视频解码失败，格式可能不支持';
                                break;
                            case error.MEDIA_ERR_SRC_NOT_SUPPORTED:
                                errorMessage = `不支持的视频格式或源不可用 (${platform}平台)`;
                                // 对于小红书，添加详细调试信息
                                if (platform === 'xiaohongshu') {
                                    errorMessage += `\n调试信息: 代理=${this.useProxy}, 原始URL=${this.originalUrl}, 视频源=${this.videoPlayer.src}`;
                                }
                                break;
                        }
                    }
                    
                    // 针对B站添加特殊提示
                    if (platform === 'bilibili') {
                        errorMessage += '，B站视频可能需要特殊处理';
                    }
                    
                    // 针对小红书添加特殊提示
                    if (platform === 'xiaohongshu') {
                        errorMessage += '，小红书视频可能需要特殊处理';
                    }
                    
                    this.showError(errorMessage);
                });

                this.videoPlayer.addEventListener('loadedmetadata', () => {
                    // 视频元数据加载完成，显示控制按钮
                    this.playBtn.style.display = 'inline-flex';
                    this.fullscreenBtn.style.display = 'inline-flex';
                });
            }

            async loadVideo(url, originalUrl = null) {
                try {
                    this.originalUrl = originalUrl || url;
                    const platform = this.detectPlatform(url, originalUrl);
                    const urlType = this.detectUrlType(url);
                    
                    console.log('原始视频URL:', url);
                    console.log('URL平台检测:', platform);
                    console.log('URL类型检测:', urlType);
                    
                    // 检查是否为页面URL而非直接视频URL
                    if (urlType === 'page') {
                        this.showPageUrlError(url, platform);
                        return;
                    }
                    
                    this.useProxy = this.isExternalVideo(url);
                    this.fallbackAttempted = false; // 重置备用加载状态
                    
                    console.log('是否使用代理:', this.useProxy);
                    
                    // 对于外部视频URL，优先使用代理服务
                    let videoSrc = url;
                    if (this.useProxy) {
                        videoSrc = `/api/media/proxy/vd?url=${encodeURIComponent(url)}`;
                        console.log('使用代理加载外部视频:', url);
                        console.log('代理URL:', videoSrc);
                    }
                    
                    // 设置视频源
                    this.videoPlayer.src = videoSrc;
                    
                    // 设置跨域属性（用于代理服务）
                    if (this.useProxy) {
                        this.videoPlayer.crossOrigin = 'anonymous';
                    }
                    
                    // 预加载元数据
                    this.videoPlayer.preload = 'metadata';
                    
                    console.log('开始加载视频:', videoSrc);
                    
                    // 测试代理URL是否可访问
                    if (this.useProxy) {
                        await this.testProxyUrl(videoSrc);
                    }
                } catch (error) {
                    console.error('视频URL设置失败:', error);
                    this.showError('视频地址无效');
                }
            }

            // 检测视频平台
            detectPlatform(url, originalUrl = null) {
                // 先从原始URL检测平台
                if (originalUrl) {
                    if (originalUrl.includes('douyin.com')) return 'douyin';
                    if (originalUrl.includes('bilibili.com')) return 'bilibili';
                    if (originalUrl.includes('tiktok.com')) return 'tiktok';
                    if (originalUrl.includes('xiaohongshu.com')) return 'xiaohongshu';
                    if (originalUrl.includes('kuaishou.com')) return 'kuaishou';
                }
                
                // 从视频URL检测平台
                if (url.includes('douyin.com') || url.includes('douyinvod.com') || url.includes('douyinpic.com')) return 'douyin';
                if (url.includes('bilibili.com') || url.includes('bilivideo.com') || url.includes('hdslb.com')) return 'bilibili';
                if (url.includes('tiktok.com') || url.includes('tiktokcdn.com')) return 'tiktok';
                if (url.includes('xiaohongshu.com') || url.includes('xhscdn.com')) return 'xiaohongshu';  // 添加小红书CDN域名
                if (url.includes('kuaishou.com') || url.includes('ksyun.com')) return 'kuaishou';
                return 'unknown';
            }

            // 检测URL类型
            detectUrlType(url) {
                // 检查是否为直接的视频文件URL
                const videoExtensions = ['.mp4', '.m4s', '.m3u8', '.flv', '.webm', '.mov', '.avi'];
                const hasVideoExtension = videoExtensions.some(ext => url.includes(ext));
                
                if (hasVideoExtension) {
                    return 'direct_video';
                }
                
                // 检查是否为页面URL
                const pagePatterns = [
                    '/video/BV',  // B站页面
                    'douyin.com/video/', // 抖音页面（虽然一般不会出现）
                ];
                const isPageUrl = pagePatterns.some(pattern => url.includes(pattern));
                
                return isPageUrl ? 'page' : 'direct_video';
            }

            // 显示页面URL错误
            showPageUrlError(url, platform) {
                this.videoPlaceholder.style.display = 'none';
                this.loadingState.style.display = 'none';
                this.videoPlayer.style.display = 'none';
                this.errorState.style.display = 'block';
                
                const platformName = this.getPlatformDisplayName(platform);
                this.errorMessage.innerHTML = `
                    <div>
                        <strong>无法直接播放</strong><br>
                        检测到这是${platformName}的页面链接，不是直接的视频文件。<br>
                        <a href="${url}" target="_blank" style="color: #4f46e5; text-decoration: underline;">
                            点击这里在${platformName}官网观看
                        </a>
                    </div>
                `;
            }

            // 获取平台显示名称
            getPlatformDisplayName(platform) {
                const names = {
                    'bilibili': '哔哩哔哩',
                    'douyin': '抖音',
                    'tiktok': 'TikTok',
                    'xiaohongshu': '小红书'
                };
                return names[platform] || platform;
            }

            // 测试代理URL
            async testProxyUrl(proxyUrl) {
                try {
                    console.log('测试代理URL可访问性:', proxyUrl);
                    const response = await fetch(proxyUrl, { 
                        method: 'HEAD',
                        signal: AbortSignal.timeout(5000) // 5秒超时
                    });
                    console.log('代理URL响应状态:', response.status);
                    console.log('代理URL响应头:', Object.fromEntries(response.headers.entries()));
                    
                    // 如果代理URL无法访问，尝试设置fallback
                    if (response.status !== 200) {
                        console.warn('代理URL返回非200状态码:', response.status);
                        this.shouldTryFallback = true;
                    }
                } catch (error) {
                    console.error('代理URL测试失败:', error);
                    console.log('设置fallback标志');
                    this.shouldTryFallback = true;
                }
            }

            // 尝试备用加载方式
            tryFallbackLoad() {
                if (this.useProxy && this.originalUrl) {
                    console.log('代理加载失败，尝试直接加载:', this.originalUrl);
                    this.useProxy = false;
                    this.videoPlayer.src = this.originalUrl;
                    this.showLoading();
                }
            }

            isExternalVideo(url) {
                // 判断是否为外部视频URL，需要使用代理
                const externalDomains = [
                    'douyin.com',
                    'douyinvod.com',
                    'douyinpic.com',
                    'tiktok.com',
                    'tiktokcdn.com', 
                    'xiaohongshu.com',
                    'xhscdn.com',  // 小红书CDN域名
                    'bilibili.com',
                    'bilivideo.com',  // B站视频流域名
                    'hdslb.com',     // B站CDN域名
                    'kuaishou.com',
                    'ksyun.com',     // 快手CDN域名
                    'instagram.com',
                    'youtube.com',
                    'youtu.be'
                ];
                
                try {
                    const urlObj = new URL(url);
                    return externalDomains.some(domain => urlObj.hostname.includes(domain));
                } catch {
                    return false;
                }
            }

            showLoading() {
                this.videoPlaceholder.style.display = 'none';
                this.videoPlayer.style.display = 'none';
                this.errorState.style.display = 'none';
                this.loadingState.style.display = 'flex';
            }

            showVideo() {
                this.videoPlaceholder.style.display = 'none';
                this.loadingState.style.display = 'none';
                this.errorState.style.display = 'none';
                this.videoPlayer.style.display = 'block';
                
                // 设置视频海报（如果有的话）
                const urlParams = new URLSearchParams(window.location.search);
                const poster = urlParams.get('poster');
                if (poster) {
                    this.videoPlayer.poster = poster;
                }
            }

            showError(message) {
                this.videoPlaceholder.style.display = 'none';
                this.loadingState.style.display = 'none';
                this.videoPlayer.style.display = 'none';
                this.errorState.style.display = 'block';
                this.errorMessage.textContent = message;
            }
        }

        // 页面加载完成后初始化播放器
        document.addEventListener('DOMContentLoaded', () => {
            new VideoPlayer();
        });

        // 全局错误处理
        window.addEventListener('error', (e) => {
            console.error('页面错误:', e);
        });
    </script>

    <!-- 组件系统 -->
    <script src="/static/js/components.js"></script>
    <script>
        // 初始化页面，设置播放器为active
        initializePage('nav-player');
    </script>
</body>
</html>